<script setup>
import { onMounted, ref } from 'vue'
import { useAMap } from '@/hooks/useAMap.js'
const { initMap, addMarkers, removeMarkers } = useAMap('container')
import Bottoms from '@/views/map/components/bottoms.vue'
const handleClickMarker = async (point) => {
  console.warn('🚀 ~ 点击了标点', point)
}
let markers = ref([])
const addMarkersChange = (points) => {
  markers.value = points
  removeMarkers()
  addMarkers(
    points.map((e) => {
      e.icon =
        e.id % 2 !== 0
          ? 'map/mdi--location.png'
          : 'map/mdi--location-on-outline.png'
      return e
    }),
    handleClickMarker,
  )
}
const deleteMarkers = () => {
  removeMarkers([0, 1, 2])
}
onMounted(() => {
  initMap()
})
</script>

<template>
  <div id="container" class="h-full relative">
    <Bottoms
      class="absolute z-50 left-4 top-4"
      @addMarkersChange="addMarkersChange"
      @deleteMarkersChange="deleteMarkers"
    ></Bottoms>
  </div>
</template>

<style scoped lang="scss"></style>
